<template>
	<div v-title data-title="与时网" class="topFixed">
			<!-- 顶部导航栏 -->
		<el-menu id="fixed" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
		  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
		<img id="logo" src="../assets/logo.png" width="100px" height="50px">
		  <el-menu-item index="1"><router-link class="a-color" to="/"><i class="el-icon-s-home"></i>首页</router-link></el-menu-item>
		  <el-menu-item index="2"><router-link class="a-color" to="/recreation">娱乐</router-link></el-menu-item>
		  <el-menu-item index="3"><router-link class="a-color" to="/sports">体育</router-link></el-menu-item>
		  <el-menu-item index="4"><router-link class="a-color" to="/military">军事</router-link></el-menu-item>
		  <el-menu-item index="5"><router-link class="a-color" to="/internation">国际</router-link></el-menu-item>
		  <el-menu-item index="6"><router-link class="a-color" to="/politics">时政</router-link></el-menu-item>
		  <el-menu-item index="7"><router-link class="a-color" to="/science">科技</router-link></el-menu-item>
		  <el-menu-item index="8"><router-link class="a-color" to="/culture">文化</router-link></el-menu-item>
	 
			  <div style="float: right;">
				  <el-menu-item v-show="! hasLogin" class="header-r" index="13">
						  <router-link class="a-color" to="/login"><i class="el-icon-user-solid"></i>请先登录</router-link>
				  </el-menu-item>
				  <el-menu-item v-show="hasLogin" class="header-r" index="11" @click="logout">
						  <i  class="el-icon-switch-button"></i>
				  </el-menu-item>
				 <el-menu-item v-show ="hasLogin" class="header-r" index="12">
						  <router-link class="a-color" to="/user">{{user.username}}</router-link>
				  </el-menu-item>
				  <router-link to="/">
					<el-avatar class="user_img" :size="50" :src="user.avatar"></el-avatar>
				  </router-link>
				  <el-input class="input-r" placeholder="请输入内容" prefix-icon="el-icon-search">
				  </el-input>
			  </div>
		  </el-menu-item>
		  </el-menu>
	</div>
</template>

<script>
	export default{
		name: "Header",
		data() {
			return{
				user:{
					username: '请登录',
					avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
				},
				activeIndex2: '1',
				
				hasLogin: false
				

			}
		},
		
		methods: {
		  logout() {
		    const _this = this
		    _this.$axios.post("/logout", {
		      headers: {
		        "Authorization": localStorage.getItem("token")
		      }			 
		    }).then(res => {
		      _this.$store.commit("REMOVE_INFO")
		      _this.$router.push("/login")
			  this.$message({
			    message: '已退出登录',
			    type: 'success'
			  })
		
		    })
		  },
		  handleSelect(key, keyPath) {
		    console.log(key, keyPath);
		  },
		},
		
		created() {
		  if(this.$store.getters.getUser.username) {
		    this.user.username = this.$store.getters.getUser.username
		    this.user.avatar = this.$store.getters.getUser.avatar
		
		    this.hasLogin = true
		  }
		},

		
		
		
	}
</script>

<style scoped>
	
	.topFixed{
		width: 100%;
		z-index: 10;
		position: fixed;
		top: 0;
	}
	
	.a-color{
		color: white;
	}

  /* logo*/
  #logo {
    float: left;
    margin-top: 7px;
    margin-left: 10px;
    margin-right: 10px;
  }
  /* 右靠*/
  .header-r {
    float: right;
  }
  /* 搜索栏 */
  .el-input {
	  margin-top: 10px;
     width: 220px;
   }
   .input-r {
     margin-right: 15px;
     opacity: 0.8;
     float: right;
   }
   /* 用户头像 */
   .user_img {
     margin-left: 4px;
     background-color: white;
     border-radius: 50px;
     margin-top: 6px;
     margin-right: 15px;
     font-size: 10px;
     float: right;
   }
</style>
